<template>
  <div>
    <div class="lines-wrap">
      <div class="lines-inner">
        <div class="lines"></div>
      </div>
    </div>
    <!-- END lines -->

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close">
          <span class="icofont-close js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>
    <nav class="site-nav">
      <div class="container">
        <div class="site-navigation">
          <router-link to='/First' class="logo m-md-0" > iMind  <span class="text-primary">❤️</span>
          </router-link>
          <ul class="js-clone-nav  d-none d-lg-inline-none text-left site-menu">
            <li class="active">
              <router-link to='/First'>主页</router-link></li>
            <li><router-link to='#'>登出</router-link></li>
            <!--<li><a href="contact.html">登出</a></li>-->
          </ul>

          <a to='#' class="burger ml-auto float-right site-menu-toggle js-menu-toggle d-inline-block d-lg-block light" data-toggle="collapse" data-target="#main-navbar">
            <span></span>
          </a>

        </div>
      </div>
    </nav>
    <div class="section-hero overlay jarallax" data-speed="0.2" :style="{backgroundImage:`url(${bgImg })`}">
      <div class="container">
        <div class="row align-items-center text-center">
          <div class="col-lg-10 mx-auto">
            <h1>登入iMind</h1>
            <router-link to="/First" class="btn btn-primary">❤</router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-lg-6 order-lg-2 mb-5 mb-lg-0">
          <div class="section-title mb-5">
            <strong class="subtitle" data-aos="fade-up" data-aos-delay="0"><a name="Log">登入iMind</a></strong>
            <h2 class="heading" data-aos="fade-up" data-aos-delay="100">来聊聊吧</h2>

          </div>

    <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
      label-position="left">

      <div class="title-container">
        <h3 class="title">登录</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input ref="username" v-model="loginForm.username" placeholder="账号" name="username" type="text" tabindex="1"
          auto-complete="on" />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码"
          name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-form-item prop="userType">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-select v-model="loginForm.userType" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:48%;" @click.native.prevent="handleLogin">登录</el-button>
      <el-button :loading="loading" type="primary" style="width:48%;" @click.native.prevent="handleRegister">注册</el-button>

    </el-form>
          </div>
        </div>
      </div>
    </div>


    <div>
      <br><br><br><br><br><br>
    </div>

    <div class="site-footer">
      <div class="inner first">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-lg-4">
              <div class="widget">
                <h3 class="heading">Write by Tamakoko</h3>
                <p>描述。</p>
              </div>
              <div class="widget">
                <ul class="list-unstyled social">
                  <li><a href="#"><span class="icon-twitter"></span></a></li>
                  <li><a href="#"><span class="icon-instagram"></span></a></li>
                  <li><a href="#"><span class="icon-facebook"></span></a></li>
                </ul>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="widget">
                <h3 class="heading">联系方式</h3>
                <ul class="list-unstyled quick-info links">
                  <li class="email"><a href="#">tamakokoodaza@gmail.com</a></li>
                  <li class="phone"><a href="#">+86 132 8108 3101</a></li>
                  <li class="address"><a href="#">心理咨询室</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner dark">
        <div class="container">
          <div class="row text-center text-md-left">
            <div class="col-md-6 text-md-right">
              <a href="#" class="mx-2">回到顶部</a>
              <a href="#" class="mx-2">留言</a>
            </div>
          </div>
        </div>
      </div>
  </div>

    <!--<div id="overlayer"></div>-->
    <!--<div class="loader">-->
      <!--<div class="spinner-border" role="status">-->
        <!--<span class="sr-only">Loading...</span>-->
      <!--</div>-->
    <!--</div>-->

  </div>

</template>

<script>
  import {
    validUsername
  } from '@/utils/validate'
import bgImg from '../../assets/images/bg_1.jpg'
  export default {
    name: 'Login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!validUsername(value)) {
          callback(new Error('请输入账号'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('The password can not be less than 6 digits'))
        } else {
          callback()
        }
      }
      return {
        bgImg: bgImg,
        options: [{
          value: '0',
          label: '中心管理员'
        }, {
          value: '1',
          label: '咨询师'
        }, {
          value: '2',
          label: '初访员'
        }, {
          value: '3',
          label: '学生用户'
        }],
        loginForm: {
          username: '',
          password: '',
          userType: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            message: '请填写用户名'
            // validator: validateUsername
          }],
          password: [{
            required: true,
            trigger: 'blur',
            message: '请填写密码'
            // validator: validatePassword
          }],
          userType: [{
            required: true,
            trigger: 'blur',
            message: '请选择'
            // validator: validatePassword
          }]
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {
      handleRegister() {
        this.$router.push("/register")
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('user/login', this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || '/'
              })
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }

</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg:#283443;
  $light_gray:#fff;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }

</style>

<style lang="scss" scoped>
  $bg:#2d3a4b;
  $dark_gray:#889aa4;
  $light_gray:#eee;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }

</style>
